<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <jz-table
      :tableHeaderTitle="tableHeaderTitle"
      :tableData="tableData"
      :isShowCheckbox="isShowCheckbox"
      :isShowIndex="isShowIndex"
      @receiveCheckedData="receiveCheckedData"
    />
  </div>
</template>

<script>
export default {
  name: 'myTable',
  data() {
    return {
      // 模拟表头数据，实际要发请求获取的
      tableHeaderTitle: [
        {
          propName: 'name',
          labelName: '姓名'
        },
        {
          propName: 'age',
          labelName: '年龄'
        },
        {
          propName: 'gender',
          labelName: '性别'
        },
        {
          propName: 'height',
          labelName: '身高'
        },
        {
          propName: 'weight',
          labelName: '体重'
        },
        {
          propName: 'like',
          labelName: '爱好'
        },
        {
          propName: 'address',
          labelName: '住址'
        }
      ],
      // 模拟表内容数据
      tableData: [
        {
          id: '11111',
          name: '孙悟空',
          age: 500,
          gender: '男',
          height: '七尺男儿',
          weight: '三百吨',
          like: '桃子',
          address: '花果山水帘洞'
        },
        {
          id: '22222',
          name: '猪八戒',
          age: 88,
          gender: '男',
          height: '七尺男儿',
          weight: '八百吨',
          like: '肉包子',
          address: '高老庄'
        },
        {
          id: '33333',
          name: '沙和尚',
          age: 1000,
          gender: '男',
          height: '七尺男儿',
          weight: '三百吨',
          like: '鱼',
          address: '通天河'
        }
      ],
      // 是否展示复选框列
      isShowCheckbox: true,
      // 是否展示序号索引列
      isShowIndex: true
    }
  },
  methods: {
    // 接收子组件勾选的行的数据
    receiveCheckedData(checked) {
      console.log('checked', checked)
    }
  }
}
</script>

<style lang="less">
</style>
